<template>
  <div class="backlog-container">
    <!-- 文档提示 -->
    <div class="doc-alert-wrapper">
      <doc-alert title="【通用】跟进记录、待办事项" url="https://doc.iocoder.cn/crm/follow-up/" />
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 侧边菜单 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <Icon icon="ep:list" class="sidebar-icon" />
          <span class="sidebar-title">待办事项</span>
        </div>

        <div class="side-item-list">
          <div
            v-for="(item, index) in leftSides"
            :key="index"
            :class="leftMenu == item.menu ? 'side-item-select' : 'side-item-default'"
            class="side-item"
            @click="sideClick(item)"
          >
            <div class="side-item-content">
              <Icon :icon="getMenuIcon(item.menu)" class="side-item-icon" />
              <span class="side-item-text">{{ item.name }}</span>
              <el-badge
                v-if="item.count > 0"
                :max="99"
                :value="item.count"
                class="side-item-badge"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <div class="content-wrapper">
          <CustomerTodayContactList v-if="leftMenu === 'customerTodayContact'" />
          <ClueFollowList v-if="leftMenu === 'clueFollow'" />
          <ContractAuditList v-if="leftMenu === 'contractAudit'" />
          <ReceivableAuditList v-if="leftMenu === 'receivableAudit'" />
          <ContractRemindList v-if="leftMenu === 'contractRemind'" />
          <CustomerFollowList v-if="leftMenu === 'customerFollow'" />
          <CustomerPutPoolRemindList v-if="leftMenu === 'customerPutPoolRemind'" />
          <ReceivablePlanRemindList v-if="leftMenu === 'receivablePlanRemind'" />
        </div>
      </div>
    </div>

    <!-- 移动端底部菜单 -->
    <div class="mobile-menu" v-show="isMobile">
      <div class="mobile-menu-toggle" @click="toggleMobileMenu">
        <Icon icon="ep:menu" class="toggle-icon" />
        <span class="toggle-text">菜单</span>
        <el-badge
          v-if="getTotalCount() > 0"
          :max="99"
          :value="getTotalCount()"
          class="toggle-badge"
        />
      </div>

      <div class="mobile-menu-overlay" v-show="showMobileMenu" @click="closeMobileMenu"></div>
      <div class="mobile-menu-panel" :class="{ show: showMobileMenu }">
        <div class="mobile-menu-header">
          <span class="mobile-menu-title">待办事项</span>
          <Icon icon="ep:close" class="mobile-menu-close" @click="closeMobileMenu" />
        </div>
        <div class="mobile-menu-list">
          <div
            v-for="(item, index) in leftSides"
            :key="index"
            :class="leftMenu == item.menu ? 'mobile-menu-item-active' : 'mobile-menu-item'"
            @click="mobileMenuClick(item)"
          >
            <Icon :icon="getMenuIcon(item.menu)" class="mobile-menu-item-icon" />
            <span class="mobile-menu-item-text">{{ item.name }}</span>
            <el-badge
              v-if="item.count > 0"
              :max="99"
              :value="item.count"
              class="mobile-menu-item-badge"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CustomerFollowList from './components/CustomerFollowList.vue'
import CustomerTodayContactList from './components/CustomerTodayContactList.vue'
import CustomerPutPoolRemindList from './components/CustomerPutPoolRemindList.vue'
import ClueFollowList from './components/ClueFollowList.vue'
import ContractAuditList from './components/ContractAuditList.vue'
import ContractRemindList from './components/ContractRemindList.vue'
import ReceivablePlanRemindList from './components/ReceivablePlanRemindList.vue'
import ReceivableAuditList from './components/ReceivableAuditList.vue'
import * as CustomerApi from '@/api/crm/customer'
import * as ClueApi from '@/api/crm/clue'
import * as ContractApi from '@/api/crm/contract'
import * as ReceivableApi from '@/api/crm/receivable'
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'

defineOptions({ name: 'CrmBacklog' })

const leftMenu = ref('customerTodayContact')
const isMobile = ref(false)
const showMobileMenu = ref(false)

const clueFollowCount = ref(0)
const customerFollowCount = ref(0)
const customerPutPoolRemindCount = ref(0)
const customerTodayContactCount = ref(0)
const contractAuditCount = ref(0)
const contractRemindCount = ref(0)
const receivableAuditCount = ref(0)
const receivablePlanRemindCount = ref(0)

const leftSides = ref([
  {
    name: '今日需联系客户',
    menu: 'customerTodayContact',
    count: customerTodayContactCount
  },
  {
    name: '分配给我的线索',
    menu: 'clueFollow',
    count: clueFollowCount
  },
  {
    name: '分配给我的客户',
    menu: 'customerFollow',
    count: customerFollowCount
  },
  {
    name: '待进入公海的客户',
    menu: 'customerPutPoolRemind',
    count: customerPutPoolRemindCount
  },
  {
    name: '待审核合同',
    menu: 'contractAudit',
    count: contractAuditCount
  },
  {
    name: '待审核回款',
    menu: 'receivableAudit',
    count: receivableAuditCount
  },
  {
    name: '待回款提醒',
    menu: 'receivablePlanRemind',
    count: receivablePlanRemindCount
  },
  {
    name: '即将到期的合同',
    menu: 'contractRemind',
    count: contractRemindCount
  }
])

/** 获取菜单图标 */
const getMenuIcon = (menu: string) => {
  const iconMap = {
    customerTodayContact: 'ep:phone',
    clueFollow: 'ep:connection',
    customerFollow: 'ep:user',
    customerPutPoolRemind: 'ep:warning',
    contractAudit: 'ep:document-checked',
    receivableAudit: 'ep:money',
    receivablePlanRemind: 'ep:calendar',
    contractRemind: 'ep:timer'
  }
  return iconMap[menu] || 'ep:list'
}

/** 获取总数量 */
const getTotalCount = () => {
  return leftSides.value.reduce((total, item) => total + item.count.value, 0)
}

/** 检测移动端 */
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

/** 切换移动端菜单 */
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

/** 关闭移动端菜单 */
const closeMobileMenu = () => {
  showMobileMenu.value = false
}

/** 移动端菜单点击 */
const mobileMenuClick = (item: any) => {
  leftMenu.value = item.menu
  closeMobileMenu()
}

/** 侧边点击 */
const sideClick = (item: any) => {
  leftMenu.value = item.menu
}

const getCount = () => {
  CustomerApi.getTodayContactCustomerCount().then(
    (count) => (customerTodayContactCount.value = count)
  )
  CustomerApi.getPutPoolRemindCustomerCount().then(
    (count) => (customerPutPoolRemindCount.value = count)
  )
  CustomerApi.getFollowCustomerCount().then((count) => (customerFollowCount.value = count))
  // ClueApi.getFollowClueCount().then((count) => (clueFollowCount.value = count))
  ContractApi.getAuditContractCount().then((count) => (contractAuditCount.value = count))
  ContractApi.getRemindContractCount().then((count) => (contractRemindCount.value = count))
  ReceivableApi.getAuditReceivableCount().then((count) => (receivableAuditCount.value = count))
  ReceivablePlanApi.getReceivablePlanRemindCount().then(
    (count) => (receivablePlanRemindCount.value = count)
  )
}

/** 监听窗口大小变化 */
const handleResize = () => {
  checkMobile()
  if (!isMobile.value) {
    showMobileMenu.value = false
  }
}

/** 激活时 */
onActivated(async () => {
  getCount()
})

/** 初始化 */
onMounted(async () => {
  getCount()
  checkMobile()
  window.addEventListener('resize', handleResize)
})

/** 卸载时 */
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.backlog-container {
  min-height: 100vh;
  background: #f8fafc;
  padding: 16px;

  @media (max-width: 768px) {
    padding: 8px;
    padding-bottom: 80px; // 为移动端底部菜单留出空间
  }
}

/* 文档提示 */
.doc-alert-wrapper {
  margin-bottom: 16px;

  @media (max-width: 768px) {
    margin-bottom: 12px;
  }
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 120px);

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 0;
    min-height: auto;
  }
}

/* 侧边菜单 */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  @media (max-width: 768px) {
    display: none;
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
}

.sidebar-icon {
  font-size: 20px;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
}

.side-item-list {
  padding: 8px 0;
}

.side-item {
  position: relative;
  margin: 0 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;

  &:hover {
    background: #f8fafc;
  }
}

.side-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  position: relative;
}

.side-item-icon {
  font-size: 16px;
  color: #6b7280;
  transition: color 0.2s ease;
}

.side-item-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: color 0.2s ease;
}

.side-item-badge {
  :deep(.el-badge__content) {
    border: none;
    background: #ef4444;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
  }
}

.side-item-default {
  color: #374151;

  &:hover {
    .side-item-icon {
      color: #0052cc;
    }
    .side-item-text {
      color: #0052cc;
    }
  }
}

.side-item-select {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid #0ea5e9;

  .side-item-icon {
    color: #0052cc;
  }

  .side-item-text {
    color: #0052cc;
    font-weight: 600;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0052cc;
  }
}

/* 内容区域 */
.content-area {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  @media (max-width: 768px) {
    border-radius: 8px;
    margin-top: 12px;
  }
}

.content-wrapper {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  @media (min-width: 769px) {
    display: none !important;
  }
}

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  cursor: pointer;
  position: relative;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.toggle-icon {
  font-size: 20px;
}

.toggle-text {
  font-size: 14px;
  font-weight: 500;
}

.toggle-badge {
  position: absolute;
  top: 8px;
  right: 20px;

  :deep(.el-badge__content) {
    border: 2px solid white;
    background: #ef4444;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
  }
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.mobile-menu-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  max-height: 70vh;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1000;

  &.show {
    transform: translateY(0);
  }
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.mobile-menu-close {
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background: #f3f4f6;
    color: #374151;
  }
}

.mobile-menu-list {
  padding: 8px 0;
  max-height: calc(70vh - 80px);
  overflow-y: auto;
}

.mobile-menu-item,
.mobile-menu-item-active {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.mobile-menu-item {
  &:hover {
    background: #f8fafc;
  }
}

.mobile-menu-item-active {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);

  .mobile-menu-item-icon {
    color: #0052cc;
  }

  .mobile-menu-item-text {
    color: #0052cc;
    font-weight: 600;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0052cc;
  }
}

.mobile-menu-item-icon {
  font-size: 18px;
  color: #6b7280;
  transition: color 0.2s ease;
}

.mobile-menu-item-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  transition: color 0.2s ease;
}

.mobile-menu-item-badge {
  :deep(.el-badge__content) {
    border: none;
    background: #ef4444;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .backlog-container {
    background: #1f2937;
  }

  .sidebar,
  .content-area {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .side-item {
    &:hover {
      background: #4b5563;
    }
  }

  .side-item-icon,
  .side-item-text {
    color: #f9fafb;
  }

  .side-item-default {
    &:hover {
      .side-item-icon,
      .side-item-text {
        color: #60a5fa;
      }
    }
  }

  .side-item-select {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border-color: #3b82f6;

    .side-item-icon,
    .side-item-text {
      color: #60a5fa;
    }

    &::before {
      background: #60a5fa;
    }
  }

  .mobile-menu-panel {
    background: #374151;
  }

  .mobile-menu-header {
    border-color: #4b5563;
  }

  .mobile-menu-title {
    color: #f9fafb;
  }

  .mobile-menu-close {
    color: #d1d5db;

    &:hover {
      background: #4b5563;
      color: #f9fafb;
    }
  }

  .mobile-menu-item {
    &:hover {
      background: #4b5563;
    }
  }

  .mobile-menu-item-active {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);

    .mobile-menu-item-icon,
    .mobile-menu-item-text {
      color: #60a5fa;
    }

    &::before {
      background: #60a5fa;
    }
  }

  .mobile-menu-item-icon,
  .mobile-menu-item-text {
    color: #f9fafb;
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .sidebar,
  .content-area {
    border: 2px solid #0052cc;
  }

  .side-item-select {
    border: 2px solid #0052cc;
    background: #e0f2fe;
  }

  .mobile-menu-toggle {
    background: #0052cc;
  }

  .mobile-menu-item-active {
    border: 2px solid #0052cc;
    background: #e0f2fe;
  }
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .side-item,
  .side-item-icon,
  .side-item-text,
  .mobile-menu-panel,
  .mobile-menu-item,
  .mobile-menu-item-icon,
  .mobile-menu-item-text,
  .mobile-menu-close {
    transition: none;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .side-item-content {
    padding: 20px 16px;
  }

  .mobile-menu-toggle {
    height: 64px;
  }

  .mobile-menu-item,
  .mobile-menu-item-active {
    padding: 20px;
  }

  .mobile-menu-close {
    padding: 8px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .backlog-container {
    padding: 4px;
  }

  .content-wrapper {
    padding: 12px;
  }

  .mobile-menu-header {
    padding: 16px;
  }

  .mobile-menu-item,
  .mobile-menu-item-active {
    padding: 16px;
  }
}

/* 横屏模式适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-menu-panel {
    max-height: 60vh;
  }

  .mobile-menu-list {
    max-height: calc(60vh - 80px);
  }
}

/* 滚动条样式 */
.mobile-menu-list {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;

    &:hover {
      background: #94a3b8;
    }
  }
}
</style>
